<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :ok=false
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    :title="title"
    :visible="visible"
    :width="500"
    cancelText="关闭"
    switchFullscreen
    @cancel="handleCancel"
    @ok="handleOk">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="经销商">
          <cn-select-cust v-decorator="['custName',validatorRules.realName]"
                         :disabled="disableSubmit||title=='编辑'"
                         :inputs="true"
                         :multiple="false"
                         :returnName="true"
                         searchIcon="search"
                          :queryParams="{ permflag: 'servuce_provider_save_impl'}"
                         selectButtonText="选择"
                         @select="handleLeaderName">
          </cn-select-cust>
          <a-input v-decorator="['custCode']" :disabled="disableSubmit" type="hidden"/>
          <a-input v-decorator="['positionName']" :disabled="disableSubmit" type="hidden"/>
          <a-input v-decorator="['positionCode']" :disabled="disableSubmit" type="hidden"/>
          <a-input v-decorator="['departCode']" :disabled="disableSubmit" type="hidden"/>
          <a-input v-decorator="['departName']" :disabled="disableSubmit" type="hidden"/>
        </a-form-item>
        <a-form-item
          :hidden="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="目标年月"
        >
          <a-month-picker :disabled="disableSubmit||title=='编辑'" valueFormat="YYYY-MM" v-decorator="['month', validatorRules.checkPeriod]" placeholder="请选择">
          </a-month-picker>
        </a-form-item>
        <a-form-item
          :disabled="disableSubmit"
          :hidden="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="巡店目标次数"
        >
          <a-input v-decorator="['shopTargetCount', validatorRules.visitPlanCustNum ]" :disabled="true"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="培训目标次数">
          <a-input v-decorator="['trainTargetCount', validatorRules.helpPlanCustNum ]" :disabled="true"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="形象覆盖次数">
          <a-input-number v-decorator="['imageCoverCount', validatorRules.imageCoverCount ]" :disabled="true" :min="0"
                   placeholder="请输入" style="width:100%"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="门店等级S">
          <a-input-number v-decorator="['coverCounts',validatorRules.coverCounts]" :disabled="disableSubmit" :min="0" style="width:100%" @change='onChange1'
                   placeholder="请输入"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="门店等级A">
          <a-input-number v-decorator="['coverCounta',validatorRules.coverCounta]" :disabled="disableSubmit" :min="0" style="width:100%"  @change='onChange2'
                          placeholder="请输入"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="门店等级B">
          <a-input-number v-decorator="['coverCountb',validatorRules.coverCountb]" :disabled="disableSubmit" :min="0" placeholder="请输入"  style="width:100%"
                          @change='onChange3' />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="门店等级C">
          <a-input-number v-decorator="['coverCountc',validatorRules.coverCountc]" :disabled="disableSubmit" :min="0" style="width:100%"  @change='onChange4'
                          placeholder="请输入"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="门店等级D">
          <a-input-number v-decorator="['coverCountd',validatorRules.coverCountd]" :disabled="disableSubmit" :min="0" style="width:100%"  @change='onChange5'
                          placeholder="请输入"/>
        </a-form-item>
<!--        <div v-for="(item,index) in terminalTargetList">-->
<!--          <a-form-item-->
<!--            :labelCol="labelCol"-->
<!--            :wrapperCol="wrapperCol"-->
<!--            label="门店等级S"-->
<!--          >-->
<!--            <span style="display: flex;justify-content: space-between;align-items: center">-->
<!--               <cn-dict-select-tag v-model="item.terminalLevel" :disabled="disableSubmit"-->
<!--                                   :options="{value:'dictDataCode',label:'dictDataDesc'}"-->
<!--                                   dictCode="terminal_level" placeholder="请选择门店级别"/>-->
<!--               <a-input-number id="inputNumber" v-model="item.targetNum" placeholder="目标数" :min="1"-->
<!--                               style="width:120px;margin: 0 8px"/>-->
<!--               <a-tag color="blue" v-if="index==0" style="width:42px;text-align:center;line-height:24px;height: 24px;"-->
<!--                      @click="hanldetwoRules(-1)">+</a-tag>-->
<!--               <a-tag color="red" v-else style="width:42px;text-align:center;line-height:24px;height: 24px;"-->
<!--                      @click="hanldetwoRules(index)">-</a-tag>-->
<!--            </span>-->

<!--          </a-form-item>-->
<!--        </div>-->
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, postAction } from '@/api/manage'
import { queryDepartTreeList, queryIdTree } from '@/api/api'
import { pick } from 'lodash'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import CnSelectCust from '@comp/cn-select-popup/CnSelectCust'

export default {
  name: 'SysDepartModal',
  components: { ATextarea, CnSelectCust },
  data() {
    return {
      listUrl: '/cnUserController/getPageList',
      departTree: [],
      orgTypeData: [],
      terminalTargetList: [{}],
      phoneWarning: '',
      title: '操作',
      isAll: false,
      seen: false,
      visible: false,
      condition: false,
      disableSubmit: false,
      model: {},
      menuhidden: false,
      menuusing: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        realName: { rules: [{ required: true, message: '' }] },
        checkPeriod: { rules: [{ required: true, message: '' }] },
        visitPlanCustNum: { rules: [{ required: true, message: '' }] },
        helpPlanCustNum: { rules: [{ required: true, message: '' }] },
        imageCoverCount: { rules: [{ required: true, message: '' }] },
        coverCounts:{rules: [{ required: true, message: '' }]},
        coverCounta:{rules: [{ required: true, message: '' }]},
        coverCountb:{rules: [{ required: true, message: '' }]},
        coverCountc:{rules: [{ required: true, message: '' }]},
        coverCountd:{rules: [{ required: true, message: '' }]},
      },
      url: {
        add: window._CONFIG['domianSfaURL'] + '/visit/sfaVisitTarget/saveOrUpdate',
        target: window._CONFIG['domianURL'] + '/cnTerminalController/getCountShopNumByCode',
        train: window._CONFIG['domianURL'] + '/cnTerminalController/getCountTrainNumByCode',
      },
      dictDisabled: true
    }
  },
  created() {
    this.loadTreeData(0)
  },
  methods: {
    numChange(){
      this.model.imageCoverCount = this.model.coverCounts + this.model.coverCounta +this.model.coverCountb + this.model.coverCountc +this.model.coverCountd
      this.$nextTick(() => {
        // this.terminalTargetList = this.model.terminalTargetList.length<1?[{}]:this.model.terminalTargetList
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
      })
    },
    onChange1(value) {
      this.model.coverCounts = value
      this.numChange()
    },
    onChange2(value) {
      this.model.coverCounta = value
      this.numChange()
    },
    onChange3(value) {
      this.model.coverCountb = value
      this.numChange()
    },
    onChange4(value) {
      this.model.coverCountc = value
      this.numChange()
    },
    onChange5(value) {
      this.model.coverCountd = value
      this.numChange()
    },
    initDictConfig() {

    },
    hanldetwoRules(index) {
      if (index == -1) {
        this.terminalTargetList.push({})
      } else {
        this.terminalTargetList.splice(index, 1)
      }
    },
    loadTreeData(orgCode) {
      var that = this
      // if (this.isAll) {
      queryDepartTreeList().then((res) => {
        if (res.success) {
          that.departTree = []
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            temp.key = temp.orgCode
            this.departTree.push(temp)
          }
        }
      })
    },
    add() {
      this.edit()
    },

    edit(record) {
      console.log(record)
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        // this.terminalTargetList = this.model.terminalTargetList.length<1?[{}]:this.model.terminalTargetList
        this.form.setFieldsValue(pick(this.model,this.model.imageCoverCount=0,this.model.coverCounts = 0,this.model.coverCounta = 0,
          this.model.coverCountb = 0,this.model.coverCountc = 0, this.model.coverCountd = 0,
          Object.keys(this.model)))
      })
    },
    close() {
      this.$emit('close')
      this.disableSubmit = false
      this.visible = false
      this.terminalTargetList = [{}]
    },

    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = Object.assign(this.model, values, )
          //时间格式化
          httpAction(this.url.add, formData, 'post').then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              that.close()
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })

        }
      })
    },
    handleCancel() {
      this.close()
    },
    // 用户选择
    async handleLeaderName(list) {
      let res = await postAction(this.url.target, { custCode: list[0].custCode })
      if (res.success) {
        this.form.setFieldsValue({ shopTargetCount: res.result })
      }
      let val = await postAction(this.url.train, { custCode: list[0].custCode })
      if (val.success) {
        this.form.setFieldsValue({ trainTargetCount: val.result })
      }
      if (list.length) {
        console.log(list)
        this.form.setFieldsValue({ custCode: list[0].custCode })
        this.form.setFieldsValue({ custName: list[0].custName })
        this.form.setFieldsValue({ positionName: list[0].positionName })
        this.form.setFieldsValue({ positionCode: list[0].positionCode })
        this.form.setFieldsValue({ departCode: list[0].departCode })
        this.form.setFieldsValue({ departName: list[0].departName })
      } else {
        this.form.setFieldsValue({ custName: '' })
        this.form.setFieldsValue({ custCode: '' })
        this.form.setFieldsValue({ positionName: '' })
        this.form.setFieldsValue({ positionCode: '' })
        this.form.setFieldsValue({ departCode: '' })
        this.form.setFieldsValue({ departName: '' })
      }
    }
  }
}
</script>

<style scoped>

</style>
